
<div class="flex flex-col min-h-screen">

    <div class="w-full h-[500px] overflow-hidden">
        <img class="w-full h-full object-cover" src="/images/daohang.jpg">
    </div>
    <div class="px-80 py-10  border-b border-gray-300">
        <div class="flex flex-col gap-2">
            <p class="text-black font-semibold">新搜索</p>
            <p class="my-3 text-gray-500"> 如果你不满意下面的结果,请开始一个新的搜索</p>
            <div class="flex items-center pl-2 py-1 pr-1 rounded bg-gray-200 max-w-1xl w-[400px]">
                <input type="text" wire:model="keyword" class="flex-1 bg-gray-200 px-4 py-2 border-none focus:outline-none focus:border-transparent focus:ring-0 rounded-full" placeholder="搜索图书">
                <button x-on:click="$wire.search()" wire:loading.attr="disabled" class="bg-violet-500 text-white px-4 py-2 ml-2 hover:bg-violet-400 rounded w-[100px]">
                    <svg wire:loading class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    搜索
                </button>
            </div>
        </div>
    </div>
    <div class="px-80 py-5">
        <div class="my-3">
            大约 {{$books->total()}} 条搜索结果：<span class="text-violet-500">{{$keyword}}</span>
        </div>
        <div class="flex-col flex">
            @if(!$books->total())
                <x-project.empty></x-project.empty>
            @endif
            <div class="grid grid-cols-4 gap-4">

                @foreach($books as $book)

                    <x-project.book-item :book="$book"/>
                @endforeach
            </div>
            <div class="flex justify-center w-full my-10">
                {{ $books->links() }}
            </div>
        </div>
    </div>


</div>

